import { View } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";

import Card from "@/components/common/Card";
import Page from "@/components/common/Page";
import ByCell from "@/components/ui/ByCell";
import Moment from "@/components/app/Moment";
import ByButton from "@/components/ui/ByButton";
import ByImageGroup from "@/components/ui/ByImageGroup";

import ApiInspection from "@/api/inspection";
import useFetch from "@/hooks/useFetch";

import {
  DailyInspection,
  DailyInspectionDetailListItem,
} from "@/types/Inspection";

const CellProps = {
  labelWidth: "6em",
  size: "small",
} as const;

export default () => {
  const { params } = useRouter<{ id: `${number}` }>();

  const { data } = useFetch<{
    inspection: DailyInspection;
    detailList: DailyInspectionDetailListItem[];
  }>(ApiInspection.inspectionDetail, {
    showLoading: true,
    defaultParams: [{ inspectionId: +params.id }],
  });

  const { inspection, detailList = [] } = data || {};

  const getPicPaths = (pics?: any[]) => pics?.map((e) => e.picture);

  return (
    inspection && (
      <Page
        slotFooter={
          detailList.length > 0 && (
            <View className="p-3 text-center">
              <ByButton
                variant="outline"
                type="error"
                className="w-2/3"
                onClick={() =>
                  Taro.navigateTo({
                    url: `/packageProject/pages/fine/apply?intentCustomerId=${inspection.intentCustomerId}`,
                  })
                }
              >
                罚款
              </ByButton>
            </View>
          )
        }
      >
        <View className="p-3">
          <Card>
            <ByCell label="标题" {...CellProps} border={false}>
              {inspection.inspectionName}
            </ByCell>

            <ByCell label="内容" {...CellProps}>
              {inspection.inspectionContent}
            </ByCell>

            <ByCell label="业主可见" {...CellProps}>
              {inspection.isCanSee ? "是" : "否"}
            </ByCell>

            <ByCell
              label="巡检照片"
              vertical
              tip={`${inspection.picList?.length || 0}张`}
              {...CellProps}
            >
              <ByImageGroup urls={inspection.picList} showEmptyTip />
            </ByCell>
          </Card>

          <View className="mt-6 mb-3 text-second">不合格项</View>

          {detailList.map((item, index) => (
            <Card key={item.detailId} title={`第${index + 1}项`}>
              <ByCell label="问题类型" {...CellProps}>
                {item.type}
              </ByCell>

              <ByCell label="描述" {...CellProps}>
                {item.description || "--"}
              </ByCell>

              {item.isRectification && (
                <>
                  <ByCell label="整改负责人" {...CellProps}>
                    {item.headerName || item.supplyName || "--"}
                  </ByCell>

                  <ByCell label="整改日期" {...CellProps}>
                    <Moment value={item.requaireProcessDate} />
                  </ByCell>
                </>
              )}

              <ByCell
                label="问题"
                vertical
                tip={`${item.picList?.length}张`}
                {...CellProps}
              >
                <ByImageGroup urls={getPicPaths(item.picList)} showEmptyTip />
              </ByCell>
            </Card>
          ))}
        </View>
      </Page>
    )
  );
};
